<script>
import axios from "axios";
import * as echarts from "echarts";

export default {
  name: "Home",
  data() {
    return {
      state: {},
      deadline: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      inventoryWarning: [],
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '销量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    }
  }, methods: {
    hilarity() {
      this.$notify({
        title: "提示",
        message: "时间已到",
        duration: 0,
      });
    },
    getData() {
      this.$api.book.getBooks(
          '',
          '',
          "sales_num"
      ).then((res) => {
        var data = res.data;
        if (data.success) {
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));
          this.option.series[0].data = data.content
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(this.option);
        } else {
          this.$message.error(res.data.message);
        }
      }).catch((resp) => {
        this.$message.error('服务器访问失败' + resp);
      });
      this.$api.book.getBooksByNum(
          20
      ).then(res=>{
        this.inventoryWarning=res.data.content
      }).catch(resp => {
        this.$message.error(resp)
      })
    }
  }, mounted() {
    this.getData()
  }
}
</script>

<template>
  <div class="container">
    <div style="height: 400px;align-items: center;margin-right: 30px">
      <el-popover
          placement="right"
          trigger="click">
        <span>不足20本的期刊有</span>
        <el-table :data="inventoryWarning">
          <el-table-column width="150" property="name" label="名称"></el-table-column>
          <el-table-column width="100" property="num" label="剩余库存"></el-table-column>
        </el-table>
        <el-button slot="reference">查看库存预警</el-button>
      </el-popover>
      <div style="margin-top: 20px;width: 200px;">
        <el-card shadow="hover" style="align-items: center">
          <el-statistic
              ref="statistic"
              @finish="hilarity"
              format="HH:mm:ss"
              :value="deadline"
              title="距离明日："
              time-indices
          >
          </el-statistic>
        </el-card>
      </div>
    </div>
    <div style="width: 400px">
      <div style="margin: 0 auto;width: 100px;">销量top5</div>
      <div id="main" style="width: 400px;height:400px;"></div>
    </div>

  </div>
</template>

<style scoped>
.container {
}
</style>